<template>
	<view class='PTList'>
		<view class="pageHeader dFlex jStart_aCenter" :style="{'height': pageHeader + 'px','padding-top': pageStatus + 'px'}">
			<view class="backIcon imgPublic" @tap.stop='back'>
				<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/back3.png" mode='widthFix'></image>
			</view>
			<view class="searchBox dFlex jStart_aCenter">
				<view class="searchIcon imgPublic">
					<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/searchIcon.png" mode="widthFix"></image>
				</view>
				<view class="ipt">
					<input type="text" v-model="keyword" @input='page = 1;status="0";initList()' placeholder="搜索">
				</view>
			</view>
		</view>
		<view class="menus dFlex jAround_aCenter">
			<view :class="['menuOne',status == '0'?'active':'']" @click='page = 1;status="0";initList()'> <text>全部</text> <view class="line"></view> </view>
			<view :class="['menuOne',status == '1'?'active':'']" @click='page = 1;status="1";initList()'> <text>进行中</text> <view class="line"></view> </view>
			<view :class="['menuOne',status == '2'?'active':'']" @click='page = 1;status="2";initList()'> <text>未开始</text> <view class="line"></view> </view>
			<view :class="['menuOne',status == '3'?'active':'']" @click='page = 1;status="3";initList()'> <text>已结束</text> <view class="line"></view> </view>
		</view>
		<view class="list">
			<view class="listOne" v-for='(item,index) in list' :key='index' @click='lookDetail(item)'>
				<view class="HDStatus dFlex jBetween_aCenter">
					<text class='condition'>满{{item.lowest_user}}单成团 </text>
					<view :class='[{ "showStatus":true, "green":item.pintuan_status=="2", "hui":item.pintuan_status=="3", "orange":item.pintuan_status=="1"}]'>
						<span v-if='item.pintuan_status=="1"'>进行中</span>
						<span v-if='item.pintuan_status=="2"'>未开始</span> 
						<span v-if='item.pintuan_status=="3"'>已结束</span>
					</view>
				</view>
				<view class="HD_detail">
					<view class='hdName'>{{item.title}}</view>
					<view class="hdShops dFlex jBetween_aCenter">
						<view class='shopImgs dFlex jStart_aCenter'>
							<view class="shopOne imgPublic" v-for="(img,idx) in item.goods_list.slice(0,3)" :key='idx'>
								<image :src="img.goods_main_img" mode="widthFix"></image>
							</view>
						</view>
						<view class='shopCount'>共{{item.goods_num}}件商品 <text v-if='item.pintuan_status!="3"'>></text></view>
					</view>
				</view>
				<view class="operation dFlex jBetween_aCenter">
					<view class="haveTime dFlex jStart_aCenter green" v-if='item.pintuan_status=="2"'>
						<view class="toast dFlex jStart_aCenter">
							<view class="timeIcon imgPublic">
								<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/timeIcon.png" mode="widthFix"></image>
							</view>
							<text>距开团仅剩</text>
						</view>
						<view class="surplus">
							<u-count-down :timestamp="calcTime(item.start_time)" bg-color='transparent' color='#ffffff' separator-color='#ffffff' :separator-size='28' :font-size='28'></u-count-down>
						</view>
					</view>
					<view class="haveTime dFlex jStart_aCenter orange" v-if='item.pintuan_status=="1"'>
						<view class="toast dFlex jStart_aCenter">
							<view class="timeIcon imgPublic">
								<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/timeIcon.png" mode="widthFix"></image>
							</view>
							<text>距结束仅剩</text>
						</view>
						<view class="surplus">
							<u-count-down :timestamp="calcTime(item.end_time)" bg-color='transparent' color='#ffffff' separator-color='#ffffff' :separator-size='28' :font-size='28'></u-count-down>
						</view>
					</view>
					<view class="btns dFlex jEnd_aCenter">
						<button open-type="share" class='btn share' v-if='item.pintuan_status!="3"' @click.stop='shareItem(item)'>分享</button>
						<view class='btn edit' v-if='item.pintuan_status=="2"' @click.stop='edit(item.id)'>编辑</view>
						<view class='btn del' v-if='item.pintuan_status=="2"' @click.stop='del(item.id,index)'>删除</view>
					</view>
				</view>
			</view>
		</view>
		<view class='seat'></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageHeader:getApp().globalData.pageHeader,
				pageStatus:getApp().globalData.pageStatus,
				keyword:"",
				list:[],
				page:1,
				status:'0',
				load:false,
				
				shareObj:{},
			};
		},
		onLoad(){
			this.initList();
		},
		onReachBottom(){
			if(this.load){
				this.load = false;
				this.page++;
				this.initList();
			}
		},
		onShareAppMessage() {
			console.log(uni.getStorageSync('uId'));
			let share = {
				title:this.shareObj.title,
				path:'/my/activeDetail?ptid='+this.shareObj.id+"&mobile="+this.shareObj.login_user_mobile+"&shareId="+(uni.getStorageSync('uId')?uni.getStorageSync('uId'):""),
				imageUrl:this.shareObj.pt_img,
				desc:this.shareObj.notice,
			};
			return share;
		},
		onShareTimeline() {
			let share = {
				title:this.shareObj.title,
				path:'/my/activeDetail?ptid='+this.shareObj.id+"&mobile="+this.shareObj.login_user_mobile+"&shareId="+(uni.getStorageSync('uId')?uni.getStorageSync('uId'):""),
				imageUrl:this.shareObj.pt_img,
				desc:this.shareObj.notice,
			};
			return share;
		},
		methods:{
			// 分享
			shareItem(line){
				this.shareObj = line;
			},
			lookDetail(line){
				let tips = line.pintuan_status != '1' ? (line.pintuan_status == '2' ? '拼团活动未开始' : '拼团活动已结束') : '';
				if(tips){
					uni.showToast({
						title:tips,
						icon:"none"
					})
					return;
				}
				uni.navigateTo({
					url:'./activeDetail?ptid='+line.id
				})
			},
			edit(id){
				uni.navigateTo({
					url:'./createGroupBuy?id='+id
				})
			},
			del(id,index){
				uni.showModal({
					title:'确定删除该拼团活动？',
					success: (op) => {
						if(op.confirm){
							this.tool.getData('/api/Pintuan/delLearderPT',{
								id:id
							}).then(res=>{
								console.log(res);
								if(res){
									this.list.splice(index,1);
								}
							}).catch(err=>{
								console.log(err);
							})
						}
					}
				})
			},
			initList(){
				this.tool.getData('/api/Pintuan/getPintuanList',{
					keyword:this.keyword,
					page:this.page,
					status:this.status,
					pages:'mall',
					is_leader:'1',
				}).then(res=>{
					console.log(res);
					if(res){
						this.list = this.page == '1'?res:this.list.concat(res);
						this.load = res.length >= 10?true:false;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 计算剩余时间
			calcTime(time){
				return (time * 1000 - new Date().getTime()) / 1000;
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="scss">
	.list{
		.listOne{
			.operation{
				width:100%;
				padding:6px 0;
				.btns{
					.btn{
						display: inline-block;
						margin-left:12px;
					}
					.share{
						color:#FB5D02;
					}
					.edit{
						color:#409eff;
					}
					.del{
						color:#f56c6c;
					}
					flex: 1;
				}
				.haveTime{
					width: max-content;
					border-radius: 40px;
					color: white;
					.surplus{
						padding: 0 4px;
					}
					.toast{
						width: max-content;
						border-radius: 40px;
						padding:2px 6px;
						.timeIcon{
							width: 16px;
							margin-right: 4px;
						}
					}
				}
				.status{
					width: max-content;
					line-height: 20px;
					border-radius: 40px;
					padding: 0 6px;
					font-size: 12px;
				}
				.green{
					background:rgb(10,204,76);
					.toast{
						background: #0ACC4C;
					}
				}
				.orange{
					background:rgb(251,93,2);
					.toast{
						background: #FB5D02;
					}
				}
			}
			.HD_detail{
				padding:8px 0;
				.hdShops{
					width:100%;
					.shopImgs{
						flex:1;
						margin-right:8px;
						.shopOne{
							width:60px;
							height:60px;
							border-radius: 4px;
							overflow: hidden;
							margin-right: 12px;
						}
						.shopOne:last-child{
							margin-bottom: 0;
						}
					}
					.shopCount{
						font-size: 12px;
						color: #999999;
						width: max-content;
					}
				}
				.hdName{
					width:100%;
					font-size:15px;
					font-weight:bold;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-bottom: 8px;
				}
			}
			.HDStatus{
				.showStatus{
					display:inline-block;
					font-size:13px;
					padding:2px 10px;
					border-radius:50px;
				}
				.green{
					background:#0ccb4e;
					color:white;
				}
				.hui{
					background:#e9e9e9;
					color:#808080;
				}
				.orange{
					background:#fe5300;
					color:white;
				}
				width:100%;
				padding-bottom:8px;
				font-size:12px;
				border-bottom:1px solid rgba(0,0,0,0.1);
				color:#999999;
			}
			width:100%;
			padding:8px 12px;
			box-sizing:border-box;
			background:white;
			margin-bottom:12px;
			border-radius:6px;
		}
		width:calc(100% - 24px);
		margin:0 auto;
	}
	.menus{
		width:100%;
		padding:12px;
		box-sizing:border-box;
		.menuOne{
			flex:1;
			text-align: center;
			color: white;
			font-size:13px;
			.line{
				width:30px;
				margin:6px auto 0;
				height:1px;
				background:none;
			}
		}
		.active{
			font-size:15px;
			.line{
				background:white;
			}
		}
	}
	.pageHeader{
		.searchBox{
			width: 60%;
			background: white;
			border-radius: 40px;
			padding: 12rpx 24rpx;
			box-sizing: border-box;
			margin-left: 24rpx;
			.searchIcon{
				width: 30rpx;
				margin-right: 8rpx;
			}
		}
		.backIcon{
			width: 56rpx;
		}
	}
	.PTList{
		min-height: 100%;
		background: linear-gradient(to bottom,#fe5b00,#fc8b00);
	}
</style>
